<template>
	<view class="bg-gray">
		<view class="bg-white ruzhiinfo width commonbg">
			<view class="flex-row-between boxitem">
				当前到期日期
				<view>
				  2024-08-08 12:30
				</view>
			</view>
			<view class="flex-row-between boxitem" v-if="type == 2">
				包间类型
				<view>
				  请选择
				  <u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="boxitem">
				加时时长
				<view class="yuyue flex-row-between">
					<view v-for='(item,index) in 4' :key='index' 
						class="time font12 flex-row-between">
						1小时
						<view class="yellow">￥45</view>
						<view class="shape font12">✔</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white ruzhiinfo width commonbg">
			<view class="flex-row-between boxitem">
				包间号/桌号(自动分配)
				<view>
				  423
				</view>
			</view>
		</view>
		<bottomsubmit title='确认支付'></bottomsubmit>
	</view>
</template>

<script>
import tpl_banner from "@/pages/tabbar/roperty/template/tpl_banner"; //导航栏模块
import storage from "@/utils/storage.js"; //缓存
import bottomsubmit from "@/components/huashuiwan/bottomsubmit.vue"; 
export default {
	data() {
		return {
			type:1
		};
	},
	components: {
		carousel: tpl_banner,
		bottomsubmit
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		this.type = options.type
	},
	/**
	 * 页面显示
	 */
	onShow() {
		
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		
	},
	methods: {
		
	}
};
</script>

<style scoped lang="scss">
	.commonbg{
		padding: 0 20px;
		border-radius: 12px;
		margin-bottom: 14px;
		.line{
			width: 4px;
			height: 16px;
			background-color: #499C43;
			margin-right: 5px;
		}
	}
	.boxitem{
		padding: 15px 0px;
		border-bottom: 1px solid #F6F6F6;
		.liuyan{
			border: 1px solid #F6F6F6;
			margin-top: 10px;
			padding: 10px;
		}
	}
	.boxitem:last-child{
		border:none;
	}
	.yuyue{
		margin-top: 12px;
		.time{
			width: 49%;
			overflow: hidden;
			background-color: #F4F6F8;
			padding: 8px 10px;
			border-radius: 8px;
			border:1px solid #dddddd60;
			position: relative;
			margin-bottom: 8px;
		}
		.shape{
			width: 24px;
			height: 14px;
			border-radius: 12px  0  8px  0px;
			background-color: #499C43;
			position: absolute;
			line-height: 14px;
			text-align: center;
			color: #fff;
			font-size: 12px;
			right: 0;
			bottom: 0;
			display: none;
		}
		.time:nth-child(1){
			border-color: #499C43;
			background-color: #E5F6E6;
			.shape{
				display: block;
			}
		}
	}
	.submitbtn{
		.yellow{
			padding: 0 5px 0 10px;
		}
		width: 100%;
		position: fixed;
		bottom: 0px;
		left:0;
		background-color: #fff;
		box-shadow: 0px -2px 0px 1px #EEEEEE;
		padding: 8px 10px;
		.yudin{
			width: 124px;
			height: 40px;
			background-color: #499C43;
			text-align: center;
			line-height: 40px;
			color:#fff;
			border-radius: 40px;
			font-size: 16px;
		}
	}
</style>